<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	/*
		Dom对象
			1.通过getElementById()查询出来的标签对象是Dom对象
			2.通过getElementsByName()查询出来的标签对象是Dom对象
			3.通过getElementsByTagName()查询出来的标签对象是Dom对象
			4.通过createElement() 方法创建的对象，是Dom对象
				DOM对象Alert出来的效果是: [object HTML标签名Element]

		jQuery对象
			5.通过JQuery提供的API创建的对象，是JQuery对象
				alert( $("<h1></h1>") );
			6.通过JQuery 包装的Dom对象，也是JQuery对象
				alert($("button"));
			7.通过JQuery提供的API查询到的对象，是JQuery对象
				alert($("#testDiv"));
	*/
	$(function(){
		testDiv.css("color","red");
		testDiv.style.color = "blue";

		/*jQuery对象的本质：dom对象数组 + jQuery提供的一系列功能函数*/
		//数组对象
		var arr = [12,"abc",true];
		var $btns = $("button");//button标签数组对象
		//变量jQuery对象
		for (var i = 0; i < $btns.length; i++){
			alert($btns[i]);//得到的是dom对象 如：[object HTMLButtonElement]
		}

		/*jQuery对象不能使用DOM对象的属性和方法  DOM也不能使用jQuery对象的属性和方法*/
		document.getElementById("testDiv").innerHTML = "这是dom对象的属性InnerHTML";
		//$("#testDiv").innerHTML = "这是dom对象的属性InnerHTML"; 不能使用dom的方法
		//jQuery的click方法
		$("#testDiv").click(function () {
			alert("click()是jQuery对象的方法");
		});
		//dom对象不能使用jQuery的方法
		/*document.getElementById("testDiv").click(function () {
			alert("click()是jQuery对象的方法");
		});*/

		/*DOM对象和jQuery对象互相转换*/
		//dom对象转换为jQuery对象
		//1.先有dom对象
		//2.$(DOM对象） 就可以转换为jQuery对象
		var div = document.getElementById("testDiv");
		alert( $(div) );
		//jQuery对象转换为dom对象
		//1.先有jQuery对象
		//2.jQuery对象[下标]  取出相应的DOM对象
		alert( $(div)[0] );
	});

</script>
</head>
<body>
	<div id="testDiv">Atguigu is Very Good!</div>
	
	<button id="dom2dom">使用DOM对象调用DOM方法</button>
	<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
	<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
	<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>



</body>
</html>